문제상황

처음에 게시글 조회에 들어가면 <div class="ql-container">가 두개가 생김. 새로고침하면 하나만 남음.

코드

"use client";
import Quill from "quill";
import { useRef, useEffect } from "react";
import "quill/dist/quill.bubble.css";

export default function Viewer({ content }: { content: string }) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const quillRef = useRef<Quill | null>(null);

  useEffect(() => {
    console.log("useEffect()");
    console.log("content:", typeof content, content);
    let quill: Quill | null = null;
    let container: HTMLDivElement | null = null;

    const loadQuill = async () => {
      console.log("loadQuill()");
      if (!containerRef.current) return;
      const QuillModule = await import("quill");
      const Quill = QuillModule.default;

      container = containerRef.current;
      const editorContainer = container.appendChild(
        document.createElement("div")
      );
      quill = new Quill(editorContainer, {
        theme: "bubble",
      });
      quill.enable(false);
      quillRef.current = quill;
      const delta = JSON.parse(content);
      quill.setContents(delta);
    };
    loadQuill();
  });

  return (
    <div className="h-full overflow-auto">
      <div ref={containerRef} className="ml-20 mr-30 px-15 outline-none" />
    </div>
  );
}

설명

콘솔에도 console.log들이 두번씩 찍힌다. 이게 useEffect가 두번 실행된다는 말인거 같은데. 찾아보니까 개발환경에서는 useEffect가 두번 실행된다고 한다. Strict Mode 때문에. 실제로 vercel의 배포판에서 보니까 게시글이 두번 등장하지 않음.